<template>
  <div class="box">
    <el-input v-model="history"
              style="font-size: large;height: 38px;"
              type="textarea"
              class="content"
              readonly/>
  </div>
</template>

<script>
import {computed} from "vue";
import {useStore} from "vuex";

export default {
  name: "History",
  setup(){
    const store=useStore();
    const history=computed(()=>{
      let value='';
      for(let key of Object.keys(store.state.history)){
        value+=key+'\n';
        store.state.history[key].forEach(v=>{
          value+=v+'\n';
        })
        value+='\n';
      }
      return value;
    })
    return{
      history
    }
  }
}
</script>

<style scoped lang="less">
.box{
  height: 100%;
  border-radius: 5px;
}
:deep(.el-textarea),:deep(.el-textarea__inner){
  height: 100% !important;
}
:deep(.content){
  .el-textarea__inner{
    cursor: pointer !important;
    background-color: rgba(255, 255, 255,0.3) !important;
  }
}
</style>
